<template>
  <div class="">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="订单详情" />
    <div class="order">
      <div class="line"></div>
      <div class="header box">
        <div class="consultation-type">{{categroy}}</div>
        <div class="problem">{{list.problem}}</div>
        <div class="header-hybrid">
          <div class="question-tag">{{list.main_title}}</div>
          <div class="time">{{list.createtime}}</div>
        </div>
      </div>
      <div class="lawyer box">
        <image class="avatar" :src="list.lawyer.avatar" />
        <div class="info">
          <div class="name">{{list.lawyer.reply_realname}}</div>
          <div class="lawyer-tag">{{gh_text}}</div>
        </div>
      </div>
      <div class="box item-box">
        <div class="item">
          <div class="item-title">{{categroy}}</div>
          <div class="money">￥{{list.charge}}</div>
        </div>
        <div class="item">
          <div class="item-title">佣金抵扣</div>
          <div class="money">￥-{{list.deduction_money}}</div>
        </div>
        <div class="item">
          <div class="item-title">实付款</div>
          <div class="money red">￥{{list.payment_money}}</div>
        </div>
      </div>
      <div class="btn-box">
        <navigator :url="'/pageMy/list/feedback?id='+list.lawyer.id" class="complaint">投诉律师</navigator>
        <div class="line"></div>
        <div class="finish" @click.stop="handleConfrim(list.id)">完成服务</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      categroy: '',
      gh_text: '', //分类
      type: '', // 订单类型
    }
  },
  methods: {
    async handleConfrim(id) {
      let that = this
      await this.$store.dispatch("modal", "是否确定完成服务？");
      // 请求
      const res = await this.$gh.request("member.order", {
        data: {
          op: "editComplete",
          orderid: id
        }
      }).catch(() => {})
      if(res.code == 200){
        uni.navigateTo({
            // url: `/pageMy/menu/comment?id=${id}&type=${that.type}`
            url: `/pageMy/menu/comment?orderid=${that.orderid}&type=${that.type}&lawyerid=${that.lawyerid}`
        });
      }
    },
  },
  async onLoad(e){
    this.type = e.type
    this.lawyerid = e.lawyerid || '' // 律师id
    this.orderid = e.id  // 订单id
    const res = await this.$gh.request('member.order',{
      data:{
        op: 'detailOrder',
        service_type: this.type,
        orderid: e.id
      }
    })
    this.list = res.data.list
    let arr = this.list.lawyer.main_category
    if(arr.length > 3){
      arr.length = 3
      arr[2] = arr[2]+'...'
    }
    this.gh_text = arr.join('、')
    switch (parseInt(this.list.consultation_type)) {
      case 1:
        this.categroy = "在线咨询";
        break;
      case 2:
        this.categroy = "电话咨询";
        break;
      case 3:
        this.categroy = "合同起草";
        break;
      case 4:
        this.categroy = "律师函";
        break;
      case 5:
        this.categroy = "私人顾问";
        break;

      default:
        break;
    }
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.order {
  .line {
    height: 10rpx;
  }
  .box {
    padding: 25rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  .header {
    .consultation-type {
      font-size: 30rpx;
      color: @deep-color;
    }

    .problem {
      font-size: 26rpx;
      color: @deep-color;
      padding: 25rpx 0;
    }

    .header-hybrid {
      .flex();
      .question-tag {
        padding: 10rpx;
        font-size: 26rpx;
        color: @font-color;
        margin-right: 30rpx;
        border: 1px solid @font-color;
      }

      .time {
        font-size: 26rpx;
        color: @font-color;
      }
    }
  }

  .lawyer {
    .flex();
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    .info {
      .name {
        font-size: 30rpx;
        color: @deep-color;
        margin-bottom: 20rpx;
      }

      .lawyer-tag {
        font-size: 26rpx;
        color: @font-color;
      }
    }
  }

  .item-box {
    .item {
      .gh-between();
      padding-bottom: 25rpx;
      &:last-child{
        padding: 0;
      }
      .item-title {
        font-size: 26rpx;
        color: @deep-color;
      }

      .money {
        font-size: 26rpx;
        color: @deep-color;
      }
      .red{
        font-size: 30rpx;
        color: red;
      }
    }
  }

  .btn-box {
    .flex();
    background-color: #fff;
    .complaint {
      flex: 1;
      padding: 25rpx 70rpx 25rpx 0;
      text-align: right;
      font-size: 30rpx;
      color: @deep-color;
    }
    .line{
      width: 2rpx;
      height: 40rpx;
      background-color: #eee;
    }
    .finish {
      flex: 1;
      padding: 25rpx 0 25rpx 70rpx;
      text-align: left;
      font-size: 30rpx;
      color: @deep-color;
    }
  }
}
</style>